<template>
  <el-dialog v-model="showDialog" title="修改部门" custom-class="teamDialog">
    <el-form
      :label-width="80"
      ref="ruleFormRef"
      :inline="true"
      :model="formInline"
      class="demo-form-inline"
      :rules="rules"
    >
      <el-form-item label="上级部门" prop="parentDepartmentId">
        <el-cascader
          :show-all-levels="false"
          v-model="formInline.parentDepartmentId"
          :options="prevDepOptions"
          :placeholder="'请选择上级部门'"
          :props="cascaderProps"
        />
      </el-form-item>
      <el-form-item label="部门名称" prop="departmentName">
        <el-input v-model="formInline.departmentName" placeholder="请输入部门名称" clearable />
      </el-form-item>
      <el-form-item label="负责人" placeholder="请输入负责人名称">
        <el-select
          v-model="formInline.employeeId"
          placeholder="请输入负责人名称"
          filterable
          @change="handleChange"
        >
          <el-option
            v-for="item in employList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="联系方式">
        <el-input
          :disabled="true"
          v-model="formInline.employeePhone"
          placeholder="请输入负责人联系方式"
          clearable
        />
      </el-form-item>
      <el-form-item label="状态">
        <el-radio-group v-model="formInline.departmentStatus">
          <el-radio label="0">正常</el-radio>
          <el-radio label="1">异常</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="showDialog = false">取消</el-button>
        <el-button type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, computed, reactive } from 'vue';
import CommonSelect from '@/components/CommonSelect.vue';

const emit = defineEmits(['update:editTeamDialog', 'handleConfirm']);

const props = defineProps({
  editTeamDialog: {
    type: Boolean,
    default: false,
  },
  curRow: {
    type: Object,
    default: {},
  },
  prevDepOptions: {
    type: Array,
    default: [],
  },
  employList: {
    type: Array,
    default: [],
  },
});
console.log(props.curRow);

function disableAllChildren(teams) {
  teams.forEach((team) => {
    team.disabled = true; // 设置当前团队的disabled属性为true
    if (team.children && team.children.length > 0) {
      disableAllChildren(team.children);
    }
  });
}

function addDisabledProperty(data, targetValue) {
  // 递归函数，用于查找并设置disabled属性
  function recursiveAddDisabled(obj) {
    if (obj.value === targetValue) {
      obj.disabled = true;
      disableAllChildren(obj.children);
    }
    if (obj.children && obj.children.length > 0) {
      obj.children.forEach((child) => {
        recursiveAddDisabled(child);
      });
    }
  }

  // 在每个部门中查找并设置disabled属性
  data.forEach((department) => {
    recursiveAddDisabled(department);
  });
}

addDisabledProperty(props.prevDepOptions, props.curRow.id);

const ruleFormRef = ref(null);
const showDialog = computed({
  get() {
    return props.editTeamDialog;
  },
  set(v) {
    emit('update:editTeamDialog', v);
  },
});

const formInline = reactive({
  departmentId: '',
  parentDepartmentId: '',
  departmentName: '', //部门名称
  employeeName: '', //负责人名称
  employeeId: '',
  employeePhone: '', //负责人手机号
  employeeEmail: '', //负责人邮箱
  teamStatus: '',
  departmentStatus: '',
});

// 回显数据
for (const key in formInline) {
  formInline[key] = props.curRow[key];
}
const rules = reactive({
  parentDepartmentId: [
    {
      required: true,
      message: '请选择上级部门',
      trigger: 'blur',
    },
  ],
  departmentName: [
    {
      required: true,
      message: '请输入部门名称',
      trigger: 'blur',
    },
  ],
});

const cascaderProps = {
  emitPath: false,
  checkStrictly: true,
};

const handleConfirm = () => {
  emit('handleConfirm', formInline);
  showDialog.value = false;
};

const handleChange = (v) => {
  formInline.employeePhone = props.employList[v - 1].phoneNumber;
};

const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      emit('handleConfirm', formInline);
      showDialog.value = false;
    } else {
      console.log('error submit!', fields);
    }
  });
};
</script>

<style lang="less">
.teamDialog {
  width: 35vw;

  .el-dialog__body {
    .el-form {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;

      .el-form-item {
        width: 40%;
      }
    }
  }
}
</style>
